<template>
    <van-tabs v-model="active" sticky>
        <van-tab title="图文详情" class="img-detial">
            <section id="detailImg" class="tuwen-c">
                <img src="http://p12.jmstatic.com/global/image/201909/06/1567742925.3341.jpg" alt="">
                <img src="http://p12.jmstatic.com/global/image/201911/19/1574150900.7327.jpg" alt="">
                <img src="http://p12.jmstatic.com/global/image/201908/09/1565356550.8119.jpg" alt="">
                <img src="http://p12.jmstatic.com/global/image/201908/09/1565356551.1868.jpg" alt="">
                <img src="http://p12.jmstatic.com/global/image/201908/09/1565356551.5091.jpg" alt="">
                <img src="http://p12.jmstatic.com/global/image/201908/09/1565356552.1186.jpg" alt="">
                <div id="description_usage" class="detail_info">
                    <img src="http://p12.jmstatic.com/global/image/201908/09/1565356558.9492.jpg" alt="">
                    <img src="http://p12.jmstatic.com/global/image/201909/06/1567742935.5107.jpg" alt="">
                </div>
                <div id="info" class="detail_info"><img src="http://p12.jmstatic.com/global/image/201908/09/1565356611.4419.jpg" alt="">
                    <img src="http://p12.jmstatic.com/global/image/201908/09/1565356611.7939.jpg" alt="">
                    <img src="http://p12.jmstatic.com/global/image/201908/09/1565356612.4616.jpg" alt="">
                    <img src="http://p12.jmstatic.com/global/image/201908/09/1565356612.7934.jpg" alt="">
                    <img src="http://p12.jmstatic.com/global/image/201908/09/1565356613.13.jpg" alt="">
                </div>
            </section>
        </van-tab>
        <van-tab title="商品参数" class="product-detial">
            <ul class="detail_arg" id="minten">
                <li>
                    <span class="arg_title">商品名称</span>
                    <span class="arg_content">古驰 (GUCCI) 罪爱淡香水 75ml </span>
                </li>
                <li>
                    <span class="arg_title">品牌</span>
                    <span class="arg_content">古驰</span>
                </li>
                <li>
                    <span class="arg_title">功效</span>
                    <span class="arg_content">净化,装扮,香氛</span>
                </li>
                <li>
                    <span class="arg_title">生产地区</span>
                    <span class="arg_content">法国</span>
                </li>
                <li>
                    <span class="arg_title">适用人群</span>
                    <span class="arg_content">所有爱香的人</span>
                </li>
                <li>
                    <span class="arg_title">保质期限</span>
                    <span class="arg_content">5年</span>
                </li>
                <li>
                    <span class="arg_title">特别说明</span>
                    <span class="arg_content">本产品为全新专柜正装，有外盒有塑封</span>
                </li>
                <li>
                    <span class="arg_title">退货政策</span>
                    <span class="arg_content">本商品不支持退货</span>
                </li>
            </ul>
        </van-tab>
        <van-tab title="评价" class="comment-detial" ><comment-list :show="show"  :verify_code="verify_code" :product_id="product_id"/></van-tab>
    </van-tabs>
</template>

<script>
import commentList from './comment-list'
export default {
    name: "tuwen",
    props: {
        verify_code:{
            type:String,
            required:true
        },
        product_id:{
            type:String,
            required:true
        },
    },
    data() {
        return {
            active: 0,
            list: [], // 列表数组
            show: true,
            loading: false, // 是否处于加载中
            finished: false, // 是否停止load方法
            rowCount: 0,
            page: 1, // 请求的页面
        }
    },
    components: {commentList},
    methods: {
    },
    mounted() {
    }
}
</script>

<style scoped lang="scss">
.product-detial{
    padding:  10px;
    min-height: calc(100vh - 8vh);
    background-color: #fff;
    li{
        display: flex;
        justify-content: flex-start;
        text-align: left;
        @extend ._style-fs13;
        padding: 5px 0;
        .arg_title{
            width: 27.5vw;
            color: $color-v4;
        }
        .arg_content{
            flex: 1;
            color: $color-v3;
        }
    }
}
</style>
